<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <link crossorigin="anonymous" integrity="sha384-9GKi7Mg3e8wxMnh60bnNnc9kuwGfarF0StF1UbfPt4F5GMVfxBgfh8/pW4iHavxG"
          href="https://lib.baomitu.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"
            src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            src="https://lib.baomitu.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{msg}}</h3>

</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'ok'
        },
        methods: {
            show() {
                console.log('执行了show方法')
            }
        },
        beforeCreate() {//Vue的第1个生命周期函数-实例被完全创建之前，会执行他
            // console.log(this.msg)
            // this.show();
            // 上面这2个函数执行都有问题，在这个阶段，data和methods中的数据都还没有被初始化，所以会报错
        },
        created() {//第2个生命周期函数，此时data和methods中的数据都被初始化好了。
            // console.log(this.msg)
            // this.show();
        },
        beforeMount(){//第3个生命周期函数，模版已经在内存中编译完成，但是尚未把模版渲染到页面中
            //在beforeMount执行的时候，页面中的元素还没有被真正替换过来，只是之前写的有些模版字符串
            //console.log(document.getElementById('h3').innerText)//这里的输出为{{msg}}证明了上面的结论
        },
        mounted(){//第4个生命周期函数，表示内存中的模版已经真实的挂载到了页面中，用户已经可以看到渲染好了的页面了。
            console.log(document.getElementById('h3').innerText)//此时在打印这句话就正常了。输出ok
            //注意：mounted是实例创建期间的最后一个函数，当执行完mounted就表示实例已经被完全创建好了，此时
            //如果没有其他操作的话，这个实例就这样静静的存在着
            //此时组间已经脱离了创建阶段，进入到了运行阶段
        },
        //运行阶段就2个生命周期函数beforeUpdate，和updated。他们是对应的
        beforeUpdate(){//运行阶段中，当data数据发生改变时执行,这2个事件会根据data数据的改变，有选择性的执行0次或多次
            //这个时候data里面的数据改了，但是dom中显示的数据还没有改
            console.log('beforeUpdate-dom---->' + document.getElementById('h3').innerText)
            console.log('beforeUpdate-data---->' + this.msg)
        },
        updated(){
            console.log('updated-dom---->' + document.getElementById('h3').innerText)
            console.log('updated-data---->' + this.msg)
        },
        beforeDestroye(){//当执行这个函数时，vue实例就已经从运行阶段进入到销毁阶段
            //此时实例内部所有的data，methods，filters，指令等等都是处于可用状态，没有被真正的销毁
        },
        destroyed(){
            //当执行到此函数时，实例已经被完全销毁了，其中的data，methods，filters，等已经不可用了
        }

    })

</script>

</body>
</html>